<script setup>
import { storeToRefs } from 'pinia'
import { watch, nextTick } from 'vue'
import useCommonStore from '@/store/modules/common'
const { menuFold, refreshFlag } = storeToRefs(useCommonStore())
watch(refreshFlag, (newVal, oldVal) => {
  console.log(newVal, oldVal)
  if (newVal === false) {
    nextTick(() => {
      refreshFlag.value = !refreshFlag.value
    })
  }
})
</script>

<template>
  <div :class="`layout_container ${menuFold ? 'fold' : ''}`">
    <router-view v-slot="{ Component }">
      <Transition name="fade">
        <component v-if="refreshFlag" :is="Component" />
      </Transition>
    </router-view>
  </div>
</template>

<style scoped lang="scss">
.layout_container {
  position: absolute;
  width: calc(100% - $sideBar-width - 10px);
  height: calc(100vh - $topBar-height - 10px);
  left: $sideBar-width;
  top: $topBar-height;
  margin: 10px;
  overflow: auto;
  background-color: #ccc;
  &.fold {
    transition: all 100ms ease-in-out;
    width: calc(100% - $sideBar-min-width - 10px);
    left: $sideBar-min-width;
  }
}
.fade-enter-from {
  opacity: 0;
  transform: scale(0);
}

.fade-enter-active {
  transition: all 0.5s;
}

.fade-enter-to {
  opacity: 1;
  transform: scale(1);
}
</style>
